<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>古诗词</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/css/mdui.min.css"/>
    <link rel="stylesheet" href="/static/css/index.css">
    <script src="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/js/mdui.min.js"></script>
</head>

<body class="mdui-theme-primary-indigo mdui-theme-accent-pink ">
<div class="mdui-appbar">
    <div class="mdui-toolbar mdui-color-theme">
        <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons"></i></a>
        <a href="javascript:;" class="mdui-typo-title">古诗词</a>
        <div class="mdui-toolbar-spacer"></div>
        <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons"></i></a>
        <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons"></i></a>
        <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons"></i></a>
    </div>
    <div class="mdui-tab mdui-tab-scrollable mdui-color-theme" mdui-tab>
        <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">大唐风流</a>
        <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">南朝四百八十寺</a>
        <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">多少楼台烟雨中</a>
    </div>
</div>
<ul id="showTab" class="mdui-list" style="min-height: 100%">
</ul>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
    var page = 1
    $(function (){
        loadData()
        function loadData(){
            $.ajax({
                type: "GET",
                url: "getInfoList",
                data: {page:page},
                dataType: "json",
                success: function(data){
                    if (data.Code == 0) {
                        var html = ""
                        for (var i = 0; i < data.Data.length; i++) {
                            html += '<li class="mdui-list-item mdui-ripple">\n' +
                                '        <div class="mdui-list-item-avatar"><img src="'+ data.Data[i]['Image'] +'"/></div>\n' +
                                '        <div class="mdui-list-item-content">'+ data.Data[i]['Title'] +'</div>\n' +
                                '        <span>'+ data.Data[i]['Author'] +'</span>\n' +
                                '    </li>'
                        }
                        $('#showTab').append(html)
                    }
                }
            });
        }

        $(window).scroll(function(){
            if ($(window).scrollTop() + $(window).height() == $(document).height()) {
                page++
                loadData()
            }
        });
    })
</script>
</html>